<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resend - 开发者首选邮件发送平台</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #2d3748;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background: #1e293b;
            border-radius: 0.5rem;
            color: #f8fafc;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .step-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .highlight {
            position: relative;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background: rgba(118, 75, 162, 0.2);
            z-index: -1;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight font-serif">Resend<br>开发者首选<span class="highlight">邮件发送平台</span></h1>
                    <p class="text-xl opacity-90 mb-8">简单、可靠的API驱动邮件服务，为现代应用提供专业的邮件解决方案</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://resend.com/" class="bg-white text-indigo-700 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all duration-300 shadow-lg">立即试用</a>
                        <a href="#features" class="border border-white border-opacity-30 text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition-all duration-300">了解更多</a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm border border-white border-opacity-20">
                        <div class="code-block p-4 rounded-lg">
                            <div class="flex items-center mb-4">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <pre class="text-sm md:text-base"><code class="language-python"># 发送邮件的Python示例
from resend import Resend

resend = Resend('re_123456789')

params = {
    'from': 'you@yourdomain.com',
    'to': 'recipient@example.com',
    'subject': '你好',
    'html': '&lt;p&gt;这是一封测试邮件&lt;/p&gt;'
}

try:
    result = resend.emails.send(params)
    print('邮件发送成功:', result)
except Exception as e:
    print('邮件发送失败:', e)</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">专为开发者设计的<span class="highlight">核心功能</span></h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Resend提供了一系列强大功能，让邮件发送变得前所未有的简单</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-code text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">简单易用的API</h3>
                    <p class="text-gray-600">支持多种编程语言(Node.js、Python、Ruby等)，几行代码即可发送邮件</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-bell text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">实时状态追踪</h3>
                    <p class="text-gray-600">通过webhook获取邮件发送、投递、打开和点击的实时通知</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-600 mb-4">
                        <i class="fab fa-react text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">React邮件模板</h3>
                    <p class="text-gray-600">使用React组件构建精美的邮件模板，提升开发效率</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-shield-alt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">测试模式</h3>
                    <p class="text-gray-600">安全测试环境，避免意外发送真实邮件</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-globe text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多区域部署</h3>
                    <p class="text-gray-600">全球基础设施确保邮件快速送达</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-chart-line text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">分析统计</h3>
                    <p class="text-gray-600">详细的分析报告，了解邮件性能指标</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">常见<span class="highlight">使用场景</span></h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Resend适用于各种邮件发送需求，满足不同业务场景</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full mr-4">
                            <i class="fas fa-user-plus text-lg"></i>
                        </div>
                        <h3 class="text-xl font-bold">用户注册验证</h3>
                    </div>
                    <p class="text-gray-600">发送验证码和确认邮件，确保用户身份真实性</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full mr-4">
                            <i class="fas fa-bullhorn text-lg"></i>
                        </div>
                        <h3 class="text-xl font-bold">营销活动</h3>
                    </div>
                    <p class="text-gray-600">发送新闻通讯和促销信息，提升客户参与度</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full mr-4">
                            <i class="fas fa-bell text-lg"></i>
                        </div>
                        <h3 class="text-xl font-bold">系统通知</h3>
                    </div>
                    <p class="text-gray-600">发送重要更新和提醒，保持用户知情权</p>
                </div>
            </div>
            
            <!-- Mermaid Diagram -->
            <div class="mt-16 bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                <h3 class="text-2xl font-bold mb-6 text-center font-serif">邮件发送<span class="highlight">工作流程</span></h3>
                <div class="mermaid">
                    flowchart TD
                        A[开发者应用] -->|调用API| B(Resend服务)
                        B --> C[验证发件人]
                        C --> D[路由邮件]
                        D --> E{区域选择}
                        E -->|美国| F[美国服务器]
                        E -->|欧洲| G[欧洲服务器]
                        E -->|亚洲| H[亚洲服务器]
                        F --> I[收件人邮箱]
                        G --> I
                        H --> I
                        I --> J[状态更新]
                        J --> K[Webhook通知]
                        K --> A
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">快速<span class="highlight">上手指南</span></h2>
                <p class="text-gray-600 max-w-2xl mx-auto">只需7步，轻松集成Resend邮件发送功能</p>
            </div>
            
            <div class="space-y-8">
                <!-- Step 1 -->
                <div class="flex items-start">
                    <div class="step-icon rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold mr-6">1</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">注册 Resend 账户</h3>
                        <p class="text-gray-600 mb-4">访问 <a href="https://resend.com/broadcasts" class="text-indigo-600 hover:underline">Resend 网站</a> 并点击 "Sign up" 链接。你可以选择邮箱注册或使用GitHub/Google/SSO登录。</p>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="flex items-start">
                    <div class="step-icon rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold mr-6">2</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">设置 API 密钥</h3>
                        <p class="text-gray-600 mb-4">登录后，在Dashboard中找到API密钥部分，创建并保存新的API密钥（注意安全保存，不要泄露）。</p>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="flex items-start">
                    <div class="step-icon rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold mr-6">3</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">安装 SDK</h3>
                        <div class="code-block p-4 rounded-lg mb-4">
                            <pre class="text-sm"><code class="language-bash"># Python SDK安装
pip install resend</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- Step 4 -->
                <div class="flex items-start">
                    <div class="step-icon rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold mr-6">4</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">验证发件域名</h3>
                        <p class="text-gray-600 mb-4">在Resend仪表板中，添加你要用来发送邮件的域名，并按照指示完成DNS验证步骤(SPF/DKIM/DMARC)。</p>
                    </div>
                </div>
                
                <!-- Step 5 -->
                <div class="flex items-start">
                    <div class="step-icon rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold mr-6">5</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">发送邮件</h3>
                        <div class="code-block p-4 rounded-lg mb-4">
                            <pre class="text-sm"><code class="language-python">from resend import Resend

resend = Resend('re_123456789')  # 你的API密钥

params = {
    'from': 'you@yourdomain.com',
    'to': 'recipient@example.com',
    'subject': '你好',
    'html': '&lt;p&gt;这是一封测试邮件&lt;/p&gt;'
}

resend.emails.send(params)</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- Step 6 -->
                <div class="flex items-start">
                    <div class="step-icon rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold mr-6">6</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">创建群发邮件</h3>
                        <p class="text-gray-600 mb-4">在仪表板的 "Broadcasts" 部分创建新的群发邮件，设计模板，选择接收者列表并设置发送时间。</p>
                    </div>
                </div>
                
                <!-- Step 7 -->
                <div class="flex items-start">
                    <div class="step-icon rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold mr-6">7</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">监控邮件发送情况</h3>
                        <p class="text-gray-600 mb-4">在 "Analytics" 部分查看邮件的发送统计，包括打开率、点击率等数据，优化你的邮件策略。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-indigo-600 text-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">准备好提升你的<span class="highlight">邮件发送体验</span>了吗？</h2>
            <p class="text-xl opacity-90 mb-8">立即注册Resend，享受开发者友好的邮件发送服务</p>
            <a href="https://resend.com/" class="inline-block bg-white text-indigo-600 px-8 py-4 rounded-lg font-bold hover:bg-opacity-90 transition-all duration-300 shadow-lg">免费试用</a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 添加微交互
        document.querySelectorAll('a').forEach(link => {
            link.addEventListener('mouseenter', function() {
                this.style.transition = 'all 0.3s ease';
            });
        });
    </script>
</body>
</html>